import { Button, Table, Checkbox, Modal, Form, Input } from 'antd';
import axios from 'axios';
import { useEffect, useState, } from 'react';
function UserGroups() {
    const [total, setTotal] = useState(0)
    const [pages, setPage] = useState(1)
    const [limits, setlimit] = useState(20)
    const [list, setList] = useState([])
    const getlist = async () => {
        let { list,total,limit,page } = await axios.get("/user/group/list", {
            params: {
                page: pages,
                limit: limits,
                temp: new Date().getTime(),
            }
        })
        setList(list)
        console.log(list);
        setTotal(total)
        setPage(page)
        setlimit(limit)
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: "id"
        },
        {
            title: '标签名称',
            dataIndex: 'groupName',
            key: "groupName",
        },

        {
            title: '操作',
            dataIndex: '',
            key: "x",

        },

    ];



    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };



    
    const onFinish = async(values) => {
        console.log('Success:', values);
        let res=await axios.post("/user/group/save",{
            groupName:values.groupName
        })
        console.log(res);
        getlist()

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    useEffect(() => {
        getlist()
    }, [pages])

    const onChangePage=(a,b)=>{
        console.log(a,b);
        setPage(a)
    }
    return (<div className="whitebg">
        <Button type="primary" onClick={showModal}>
            添加用户标签
        </Button>

        <Table columns={columns} dataSource={list}

            rowKey="id"
        pagination={{
            defaultCurrent: pages,
            showQuickJumper:true,
            showPrevNextJumpers:true,

            pageSize: limits,
            total: total,
            pageSizeOptions: [ 20, 50, 100],
            onChange: onChangePage
        }}

        />
        <div>
            <Modal title=" 标签名称" open={isModalOpen} footer={null} onCancel={handleCancel}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        
                        
                        name="groupName"
                        rules={[
                            {
                                required: true,
                                message: '输入不能为空',
                            },
                        ]}
                    >
                        <Input  placeholder=" 请输入标签名称"/>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>

    </div>);
}

export default UserGroups;